import React, { Component } from "react";
import { Form, Input, Button, Row, Col, DatePicker,Select, Modal } from "antd";
import Content from "../../components/Content";
import moment from "moment";

const { Search } = Input;
const { Option } = Select;
const InputGroup = Input.Group;
const { Item } = Form;
class Query_mediumForm extends Component {
  constructor(props) {
    super(props);
  }
  state = {
    newData: {}
  };

  handleSave = () => {
    this.state.newData.id = moment(new Date()).format('HHmmssSSS');

    const url = global.api.activityscreeningEntering;
    return global.network.post(url, this.state.newData)
    .then(res => {  
      Modal.success({
        content: '保存成功!',
      });
    })
    .catch(err => {
      Modal.error({
        content: '保存出错!',
      });
    })       
  }

  onSubmit = evt => {
    evt.preventDefault();
    const { onSubmit } = this.props;
    onSubmit && onSubmit();
  };

  //查看所有任务
  start = () => {
    this.setState({ loading: true });
    // ajax request after empty completing
    setTimeout(() => {
      this.setState({
        selectedRowKeys: [],
        loading: false
      });
    }, 1000);
  };

  render() {
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 3 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 }
      }
    };
    return (
      <div>
        <Form
          {...formItemLayout}
          onSubmit={this.onSubmit}
          colon={false}
        >
          <Item label="任务编号">
            <Input onChange={e => this.state.newData.m_id  = e.target.value } />
          </Item>
          <Item label="筛选方法编号">
            <Input onChange={e => this.state.newData.m_id  = e.target.value } />
          </Item>
          <Item label="筛选方法名称">
            <Input onChange={e => this.state.newData.m_id  = e.target.value } />
          </Item>
          <Item label="筛选菌株编号">
            <InputGroup compact>
              <Input
                 onChange={e => this.state.newData.m_id  = e.target.value }
                style={{ width: '45%', textAlign: "center" }}
                placeholder="请输入开始编号"
              />
              <Input
                style={{
                  width: '10%',
                  borderLeft: 0,
                  pointerEvents: "none",
                  backgroundColor: "#fff"
                }}
                placeholder="~"
                disabled
              />
              <Input
                 onChange={e => this.state.newData.m_id  = e.target.value }
                style={{ width: '45%', textAlign: "center", borderLeft: 0 }}
                placeholder="请输入结束编号"
              />
            </InputGroup>
          </Item>
          
          <Item label="发酵样品编号">
            <InputGroup compact>
              <Input
                 onChange={e => this.state.newData.m_id  = e.target.value }
                style={{ width: '45%', textAlign: "center" }}
                placeholder="请输入开始编号"
              />
              <Input
                style={{
                  width: '10%',
                  borderLeft: 0,
                  pointerEvents: "none",
                  backgroundColor: "#fff"
                }}
                placeholder="~"
                disabled
              />
              <Input
                 onChange={e => this.state.newData.m_id  = e.target.value }
                style={{ width: '45%', textAlign: "center", borderLeft: 0 }}
                placeholder="请输入结束编号"
              />
            </InputGroup>
          </Item>
          <Item label="粗提品编号">
            <InputGroup compact>
              <Input
                 onChange={e => this.state.newData.m_id  = e.target.value }
                style={{ width: '45%', textAlign: "center" }}
                placeholder="请输入开始编号"
              />
              <Input
                style={{
                  width: '10%',
                  borderLeft: 0,
                  pointerEvents: "none",
                  backgroundColor: "#fff"
                }}
                placeholder="~"
                disabled
              />
              <Input
                 onChange={e => this.state.newData.m_id  = e.target.value }
                style={{ width: '45%', textAlign: "center", borderLeft: 0 }}
                placeholder="请输入结束编号"
              />
            </InputGroup>
          </Item>
          <Item label="流份编号">
            <InputGroup compact>
              <Input
                 onChange={e => this.state.newData.m_id  = e.target.value }
                style={{ width: '45%', textAlign: "center" }}
                placeholder="请输入开始编号"
              />
              <Input
                style={{
                  width: '10%',
                  borderLeft: 0,
                  pointerEvents: "none",
                  backgroundColor: "#fff"
                }}
                placeholder="~"
                disabled
              />
              <Input
                 onChange={e => this.state.newData.m_id  = e.target.value }
                style={{ width: '45%', textAlign: "center", borderLeft: 0 }}
                placeholder="请输入结束编号"
              />
            </InputGroup>
          </Item>
          <Item label="化合物编号">
            <InputGroup compact>
              <Input
                 onChange={e => this.state.newData.m_id  = e.target.value }
                style={{ width: '45%', textAlign: "center" }}
                placeholder="请输入开始编号"
              />
              <Input
                style={{
                  width: '10%',
                  borderLeft: 0,
                  pointerEvents: "none",
                  backgroundColor: "#fff"
                }}
                placeholder="~"
                disabled
              />
              <Input
                 onChange={e => this.state.newData.m_id  = e.target.value }
                style={{ width: '45%', textAlign: "center", borderLeft: 0 }}
                placeholder="请输入结束编号"
              />
            </InputGroup>
          </Item>
         
          <Item wrapperCol={{ span: 5, offset: 3 }}>
            <Row guuter={16}>
              <Col span={5}>
                <Button type="primary" htmlType="submit" onClick={this.handleSave}>
                  初筛
                </Button>
              </Col>
            </Row>
          </Item>
        </Form>
      </div>
    );
  }
}
const WrapperedQuery_mediumForm = Form.create({
  name: "query medium"
})(Query_mediumForm);

class StrainCreat extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  onSubmit = () => {
    const { form } = this.form.props;
    form.validateFields((errs, values) => {
      console.log(errs, values);
    });
  };
  render() {
    return (
      <Content>
        <WrapperedQuery_mediumForm
          wrappedComponentRef={ref => (this.form = ref)}
          onSubmit={this.onSubmit}
        />
      </Content>
    );
  }
}

export default StrainCreat;
